<template>
  <div id="slide">
     <el-menu
      class="el-menu-vertical-demo"
      router
      :default-active='activeMenu'
      :unique-opened="true"
       background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <!-- 一级菜单 -->
      <template v-for="item in menusdata">
        <el-submenu v-if="item.subs && item.subs.length" :index="item.index" :key="item.index">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>{{item.title}}</span>
          </template>
          <!-- 二级菜单 -->
          <template v-for="itemChild in item.subs">
            <el-submenu
              v-if="itemChild.subs && itemChild.subs.length"
              :index="itemChild.index"
              :key="itemChild.index"
            >
              <template slot="title">
                <i :class="itemChild.icon"></i>
                <span>{{itemChild.title}}</span>
              </template>
              <!-- 三级菜单 -->
              <el-menu-item
                v-for="itemChild_Child in itemChild.subs"
                :index="itemChild_Child .index"
                :key="itemChild_Child.index"
              >
               <i :class="itemChild_Child.icon"></i>
                <span slot="title">{{itemChild_Child.title}}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="itemChild.index" :key="itemChild.index">
              <i :class="itemChild.icon"></i>
              <span slot="title">{{itemChild.title}}</span>
            </el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item v-else :index="item.index" :key="item.index">
          <i class="el-icon-menu"></i>
          <span slot="title">{{item.title}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'slide',
  data () {
    return {
      activeMenu: this.$route.fullPath,
      data: [
        {
          index: "/home/index",
          title: "统计分析"
        },
        {
          index: "1",
          icon: 'iconxiangmu',
          title: "后台管理",
          subs: [
            {
              index: "/home/adminlist",
              title: "管理员列表"
            },
            {
              index: "/home/authManage",
              title: "权限管理"
            },
            {
              index: "/home/activityType",
              title: "活动类型管理"
            }
          ]
        },
        {
          index: "2",
          icon: 'iconkehu',
          title: "用户管理",
          subs: [
            {
              index: "/home/userManage",
              title: "用户管理"
            }
          ]
        },
        {
          index: "3",
          icon: 'iconhoutaiguanli',
          title: "活动管理",
          subs: [
            {
              index: "/home/activitymanage",
              title: "活动列表"
            }
          ]
        }
      ],
      menusdata: []
    };
  },
  watch: {
    '$route' (to, from){
        
    }
  },
  mounted() {
    this.authControl()
    // 收集移出的路由
  },
  methods: {
    authControl() {
      let menus = JSON.parse(sessionStorage.getItem('menus'));
      let newmenus = []
      if(menus.length > 0) {
        menus.forEach(item => {
          let temp = this.data.find(ele => {
            return  ele.title == item.name
          })
          newmenus.push(temp)
        })
      }
      let newTemp = JSON.parse(JSON.stringify(newmenus))
      newTemp.forEach(item => {
        if(item.subs) {
          item.subs.splice(0, item.subs.length)
        }
      })
      menus.forEach((item , index) => {
        if(newmenus[index].subs && item.list) {
          item.list.forEach(e => {
            let temp = newmenus[index].subs.find(ele => {
              return ele.title == e.name
            })
            newTemp[index].subs.push(temp)
          })
          
        }
        
      })
      this.menusdata = newTemp
    }
  }
};
</script>

<style lang="scss">
  #slide {
    position: fixed;
    width: 240px;
    top: 71px;
    left: 0;
    bottom: 0;
    background: rgb(84, 92, 100);
    overflow-y: auto;
    overflow-x: hidden;
    .el-menu {
      width: 240px;
      .slide-title {
        font-size: 16px;
      }
    }
    
  
  }
</style>
